<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link th:href="@{/erp/assets/css/bootstrap.min.css}" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/erp/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome.min.css}"/>
    <link rel="stylesheet" th:href="@{/erp/Widget/zTree/css/zTreeStyle/zTreeStyle.css}" type="text/css">
    <link th:href="@{/erp/Widget/icheck/icheck.css}" rel="stylesheet" type="text/css"/>
    <!--[if IE 7]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/font-awesome-ie7.min.css}"/>
    <![endif]-->
    <!--[if lte IE 8]>
    <link rel="stylesheet" th:href="@{/erp/assets/css/ace-ie.min.css}"/>
    <![endif]-->
    <script th:src="@{/erp/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/erp/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/erp/assets/js/typeahead-bs2.min.js}"></script>
    <!-- page specific plugin scripts -->
    <script th:src="@{/erp/assets/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/erp/assets/js/jquery.dataTables.bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/erp/js/H-ui.js}"></script>
    <script type="text/javascript" th:src="@{/erp/js/H-ui.admin.js}"></script>
    <script th:src="@{/erp/assets/layer/layer.js}" type="text/javascript"></script>
    <script th:src="@{/erp/assets/laydate/laydate.js}" type="text/javascript"></script>
    <script type="text/javascript" th:src="@{/erp/Widget/zTree/js/jquery.ztree.all-3.5.min.js}"></script>
    <script th:src="@{/erp/js/lrtk.js}" type="text/javascript"></script>
    <style>
        .imgg img {
            max-width: 100px
        }
    </style>
    <title>产品列表</title>
</head>
<body>
<div class=" page-content clearfix">
    <div id="products_style">

        <!--产品列表展示，树-->
        <div class="h_products_list clearfix" id="products_list">
            <div id="scrollsidebar" class="left_Treeview">
                <div class="show_btn" id="rightArrow"><span></span></div>
                <div class="widget-box side_content">
                    <div class="side_title"><a title="隐藏" class="close_btn"><span></span></a></div>
                    <div class="side_list">
                        <div class="widget-header header-color-green2"><h4 class="lighter smaller">供应商列表</h4></div>
                        <div class="widget-body">
                            <div class="widget-main padding-8">
                                <div id="treeDemo" class="ztree"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <input type="hidden" value="" id="nodeLevel">
            <input type="hidden" value="" id="menuId">
            <!--列表-->
            <div class="table_menu_list" id="testIframe">
                <table class="table table-striped table-bordered table-hover" id="product-table">

                    <thead>
                    <tr>
                        <th width="80px">商品编号</th>
                        <th width="250px">商品名称</th>
                        <th width="100px">商品图片</th>
                        <th width="100px">价格</th>
                        <th width="100px">所属名称</th>
                        <th width="70px">库存</th>
                        <th width="100px">描述</th>
                        <th width="150px">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--购买的界面-->
    <div class="add_menber" id="buy" style="display:none">
        <form id="buy_form">
        <table class="table table-striped table-bordered table-hover" id="buy-table">
            <thead>
            <tr>
                <th width="100px">订单编号</th>
                <th width="100px">商品名称</th>
                <th width="100px">单价</th>
                <th width="100px">购买数量</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input class="min" id="min" type="button" value="-"/>
                    <input class="text_box" id="pNum" name="pNum" type="text" value="1" style="width:25px;"/>
                    <input class="add" id="add" type="button" value="+"/>
                </td>
            </tr>
            </tbody>
            <label id="sum" style="padding:20px"></label>
        </table>
        </form>
    </div>
</div>
</div>
</div>
</div>
<!--分页列表-->
<script>
    jQuery(function ($) {
        var productTable = $('#product-table').dataTable({
            searching : false,  //取消本地搜索框
            serverSide: true,   //开始服务器分页
            aoColumnDefs: [
                {"orderable": false, "aTargets": ["_all"]}// 制定列不参与排序
            ],
            pageLength: 5,
            lengthChange: true,
            lengthMenu: [ 5, 10, 25, 50, 75, 100 ],
            ajax: {
                url : '/buy/page',
                type : 'post',
                data : function (d) {
                    //获取分页信息
                    var searchParams= {
                        start : d.start,
                        length : d.length,
                        nodeLevel : $('#nodeLevel').val(),
                        menuId : $('#menuId').val(),
                    };
                    var data = $.param(searchParams);
                    return data;
                }
            },
            columns : [
                { "data": "p_number",'sDefaultContent': '' },
                { "data": "p_name" ,'sDefaultContent': ''},
                { "data" : "p_img",'sDefaultContent': '',"createdCell":function (td, cellData, rowData, row, col){
                        $(td).empty().append('<a onclick="member_select(this)" href="javascript:;" class="product_Display imgg"><img src="/images/'+cellData+'" title="'+rowData.p_name+'"/>')
                    }},
                { "data": "p_price" ,'sDefaultContent': ''},
                { "data": "sort" ,'sDefaultContent': ''},
                { "data": "stock" ,'sDefaultContent': ''},
                { "data": "p_remarks",'sDefaultContent': ''},
                {"data" : "id",'sDefaultContent': '', "createdCell": function (td, cellData, rowData, row, col) {
                        $(td).empty().append('<a title="查看商品" href="/buy/intoDetail?productId='+cellData+'" class="btn btn-xs btn-success lookDetail">\n' +
                            '                                <i class="icon-list bigger-120"></i></a>\n' +
                            '\n' +
                            '                            <a title="购买" onclick="member_fh(this)" class="btn btn-xs btn-info">\n' +
                            '                                <i class="bigger-10" style="fout-size:5">购买</i>\n' +
                            '                            </a>');
                        $(td).attr("class","td-manage");
                        $(td).append('<input class="pid" type="hidden" value="'+cellData+'">')
                    }},
            ]
        });

        //搜索
        $('#btn_search').click(function () {
            productTable.fnUpdate();
        })

        //初始化宽度、高度
        $(".widget-box").height($(window).height());
        $(".table_menu_list").width($(window).width() - 260);
        $(".table_menu_list").height($(window).height());
        //当文档窗口发生改变时 触发
        $(window).resize(function () {
            $(".widget-box").height($(window).height());
            $(".table_menu_list").width($(window).width() - 260);
            $(".table_menu_list").height($(window).height());
        })

        /*******树状图*******/
        var setting = {
            async:{
                enable:true,
                url:'/buy/menus',
                autoParam:["id","pid","name"],
            },
            view: {
                dblClickExpand: false,
                showLine: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootPId: ""
                }
            },
            callback: {
                beforeClick: function (treeId, treeNode) {
                    $('#nodeLevel').val(treeNode.level);
                    $('#menuId').val(treeNode.id);
                    productTable.fnUpdate();
                }
            }
        };
        $.fn.zTree.init($("#treeDemo"), setting);
        var zTree = $.fn.zTree.getZTreeObj("tree");

        function showCode(str) {
            if (!code) code = $("#code");
            code.empty();
            code.append("<li>" + str + "</li>");
        }

    });

    $(function () {
        $("#products_style").fix({
            float: 'left',
            //minStatue : true,
            skin: 'green',
            durationTime: false,
            spacingw: 30,//设置隐藏时的距离
            spacingh: 260,//设置显示时间距
        });
    });
</script>
<!--购买-->
<script type="text/javascript">
    /*购买*/
    function member_fh(obj) {
        var money;
        var pPrice = obj.parentElement.parentElement.children[3].textContent;
        var pid = obj.parentElement.parentElement.children[7].children[2].value;

        $('#pNum').val("1");
        $('#pNum').bind("change",function () {
            if ($('#pNum').val()=="0") {
                layer.alert("亲，宝贝数量不能为0哦", {
                    title: '提示框',
                    icon: 2,
                })
            } else {
                $("#sum").text("总计："+pPrice*Number($('#pNum').val()));
            }
        })
        $('#buy-table').children("tbody").children().children("td:eq(0)").text(new Date().getTime());
        $('#buy-table').children("tbody").children().children("td:eq(1)").text(obj.parentElement.parentElement.children[1].textContent);
        $('#buy-table').children("tbody").children().children("td:eq(2)").text(pPrice);

        $("#sum").text("总计："+pPrice);
        money = pPrice;
        /*购买数量加减按钮点击事件*/
        $('#add').off("click");
        $('#add').click(function () {
            $('#pNum').val(Number($('#pNum').val())+1);
            $("#sum").text("总计："+pPrice*Number($('#pNum').val()));
            money = pPrice*Number($('#pNum').val());
            return;
        })
        $('#min').off("click");
        $('#min').click(function () {
            if ($('#pNum').val()=="1") {
                layer.alert("亲，宝贝数量不能在减少了哦", {
                    title: '提示框',
                    icon: 2,
                })
            } else {
                $('#pNum').val(Number($('#pNum').val())-1);
                $("#sum").text("总计："+pPrice*Number($('#pNum').val()));
                money = pPrice*Number($('#pNum').val());
            }
        })

        layer.open({
            type: 1,
            title: '确认购买',
            maxmin: true,
            shadeClose: false, //点击遮罩关闭层
            area: ['800px', '280px'],
            content: $('#buy'),
            btn: ['确认', '取消'],
            yes: function (index, layero) {
                $.ajax({
                    url : '/buy/buy',
                    type: 'post',
                    data : {
                        orderId: $('#buy-table').children("tbody").children().children("td:eq(0)").text(),
                        productId: pid,
                        money: money,
                        number: $('#pNum').val()
                    },
                    success: function (d) {
                        if (d.rs){
                            layer.alert('购买成功！请在采购订单查看', {
                                title: '提示框',
                                icon: 1,
                            });
                            layer.close(index);
                        } else {
                            layer.alert('购买失败！请重新购买', {
                                title: '提示框',
                                icon: 2,
                            });
                        }
                    }
                })
            }
        });
    }

</script>
<!--面包屑返回值-->
<script>
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.iframeAuto(index);
    $('.Order_form').on('click', function () {
        var cname = $(this).attr("title");
        var chref = $(this).attr("href");
        var cnames = parent.$('.Current_page').html();
        var herf = parent.$("#iframe").attr("src");
        parent.$('#parentIframe').html(cname);
        parent.$('#iframe').attr("src", chref).ready();
        ;
        parent.$('#parentIframe').css("display", "inline-block");
        parent.$('.Current_page').attr({"name": herf, "href": "javascript:void(0)"}).css({
            "color": "#4c8fbd",
            "cursor": "pointer"
        });
        //parent.$('.Current_page').html("<a href='javascript:void(0)' name="+herf+" class='iframeurl'>" + cnames + "</a>");
        parent.layer.close(index);

    });
</script>
</body>
</html>